<%-- 
    Document   : add
    Created on : 05.05.2011, 11:44:24
    Author     : nico
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="u" uri="http://nixis.de/jsp/tags/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
    <head>
        <title>Add todos on multiple articles</title>
        <style type="text/css">
            .topic .highlight {
                background-color: #EEE;
            }
            
            .topic ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            .topic li {
                 padding: 4px 10px 4px 10px;
            }
            
            .topic li.added {
                 background-color: #8FB685;
            }
            
            .topic {
                margin: 0 0 10px 0;
            }
            
            .topic label {
                 font-size: 0.8em;
                 color: #3B5998;
                 border-bottom: dotted 1px #3B5998;
                 margin-bottom: 5px;
                 display: inline-block;
            }
            
            #messages-box {
                border: dotted 1px #cd0a0a;
                margin: 10px 0 20px 0;
                padding: 10px;
                display: none;
            }
            
            #messages-box ul {
                margin: 0; 
                padding: 0;
            }
        </style>
    </head>
    <body>
        <h1>Add todos on multiple articles</h1>
        <div id="messages-box">
            <ul></ul>
        </div>
        <div id="todo-selection">
            <c:forEach var="topicInfo" items="${it}">
                <c:set var="topic" value="${topicInfo.topic}"/>

                <div class="topic" alt="${topic.id}">
                    <label>${topic.name}</label>
                    <ul>
                        <c:forEach var="article" items="${topicInfo.articles}">
                            <li alt="${article.id}">
                                <span class="title">${article.title}</span>
                                <button>todo<em>!</em></button>
                            </li>
                        </c:forEach>
                    </ul>
                    </fieldset>
                </div>
            </c:forEach>
        </div>
        <script type="text/javascript">
            $(function() {
                $("#todo-selection li").hover(function() {
                    var el = $(this);
                    var name = el.attr("alt");
                    
                    $("li[alt=" + name + "]").addClass("highlight");
                }, function() {
                    var el = $(this);
                    var name = el.attr("alt");
                    
                    $("li[alt=" + name + "]").removeClass("highlight");
                });

                $("#todo-selection li button").click(function() {
                    var li = $(this).parent();                    
                    var id = parseInt(li.attr("alt"));
                    
                    $("li[alt=" + id + "]").find("button").remove();
                    
                    $.post("<u:url value="/article/" />" + id + "/todo/ajax", {
                        deadline: "", 
                        priority: 1
                    }, function(result, status) {
                        if (status == "success") {
                            var message = $(li).find("span").text();
                            
                            if (result["@status"] == "added") {
                                message = "Added " + message;
                            } else {
                                message = "Could not add " + message + ": " + result["@status"];
                            }
                            
                            var msgBox = $("#messages-box");
                            var messageField = $("<li />").hide().text(message);
                            $(msgBox).find("ul").append(messageField);
                            
                            if (msgBox.css("display") == "none") {
                                msgBox.show();
                            }
                            
                            $(messageField).fadeIn();
                            $("li[alt=" + id + "]").addClass("added");
                        }
                    }, "json");
                });
            });
        </script>
    </body>
</html>